<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/ivew.css">
    <script src="../../js/vue2.6.js"></script>
    <script src="../../js/ivew.js"></script>
</head>
<body>
<div id="app">
    <div style="padding: 20px">
        <i-form :model="formItem" :label-width="80">
            <form-item label="Input">
                <i-input v-model="formItem.input" placeholder="Enter something..."></i-input>
            </form-item>
            <form-item label="Select">
                <i-select v-model="formItem.select">
                    <i-option value="beijing">New York</i-option>
                    <i-option value="shanghai">London</i-option>
                    <i-option value="shenzhen">Sydney</i-option>
                </i-select>
            </form-item>
            <form-item label="DatePicker">
                <row>
                    <i-col span="11">
                        <date-picker type="date" placeholder="Select date" v-model="formItem.date"></date-picker>
                    </i-col>
                    <i-col span="2" style="text-align: center">-</i-col>
                    <i-col span="11">
                        <time-picker type="time" placeholder="Select time" v-model="formItem.time"></time-picker>
                    </i-col>
                </row>
            </form-item>
            <form-item label="Radio">
                <radio-group v-model="formItem.radio">
                    <radio label="male">Male</radio>
                    <radio label="female">Female</radio>
                </radio-group>
            </form-item>
            <form-item label="Checkbox">
                <checkbox-group v-model="formItem.checkbox">
                    <checkbox label="Eat"></checkbox>
                    <checkbox label="Sleep"></checkbox>
                    <checkbox label="Run"></checkbox>
                    <checkbox label="Movie"></checkbox>
                </checkbox-group>
            </form-item>
            <form-item label="Switch">
                <i-switch v-model="formItem.switch" size="large">
                    <span slot="open">On</span>
                    <span slot="close">Off</span>
                </i-switch>
            </form-item>
            <form-item label="Slider">
                <slider v-model="formItem.slider" range></slider>
            </form-item>
            <form-item label="Text">
                <i-input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></i-input>
            </form-item>
            <form-item>
                <i-button type="primary">Submit</i-button>
                <i-button style="margin-left: 8px">Cancel</i-button>
            </form-item>
        </i-form>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data () {
            return {
                formItem: {
                    input: '',
                    select: '',
                    radio: 'male',
                    checkbox: [],
                    switch: true,
                    date: '',
                    time: '',
                    slider: [20, 50],
                    textarea: ''
                }
            }
        }
    })
</script>
</body>
</html>